<template>
    <div class="z-triangle-wrapper">
        <img class="z-triangle-wrapper__top-left" src="~@/assets/img/22.png" alt="" />
        <img class="z-triangle-wrapper__top-right" src="~@/assets/img/23.png" alt="" />
        <img class="z-triangle-wrapper__bottom-left" src="~@/assets/img/24.png" alt="" />
        <img class="z-triangle-wrapper__bottom-right" src="~@/assets/img/25.png" alt="" />
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "z-triangle-wrapper"
};
</script>

<style>
.z-triangle-wrapper {
    position: relative;
    background: rgba(20, 31, 59, 0.6);
    box-shadow: inset 0 0 3rem #20bcfc;
    border: 1px solid #20bcfc;
}

.z-triangle-wrapper[shadow-size="sm"] {
    box-shadow: inset 0 0 1rem #20bcfc;
}

.z-triangle-wrapper__top-left {
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    width: 1.1rem;
    height: 1.1rem;
}

.z-triangle-wrapper__top-right {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    width: 1.1rem;
    height: 1.1rem;
}

.z-triangle-wrapper__bottom-left {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    width: 1.1rem;
    height: 1.1rem;
}

.z-triangle-wrapper__bottom-right {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 1.1rem;
    height: 1.1rem;
}
</style>